<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>01ECharts快速入门</title>
		<script src="../lib/echarts.min.js"></script>
	</head>
	<body>
		<div style="width: 600px; height: 400px"></div>
		<script>
			var mCharts = echarts.init(document.querySelector('div'))
			var xDataArry = ['小明', '小红', '小青', '小王']
			var yDataArry = [75, 82, 52, 78]
			var option = {
				title: {
					text: '成绩',
				},
				xAxis: {
					type: 'category',
					data: xDataArry,
				},
				yAxis: {
					type: 'value',
				},
				series: [
					{
						name: '语文',
						type: 'bar',
						data: yDataArry,
            itemStyle: {
              // color: {
              //   type: 'liner', // 线性渐变
              //   x: 0,
              //   y: 0,
              //   x2: 0,
              //   y2: 1,
              //   colorStops:[
              //     {
              //       offset: 0, color: 'red' // 0%处是红色
              //     },
              //     {
              //       offset: 1, color: 'blue' // 100%处是蓝色
              //     }
              //   ]
              // }
              color: {
                type: 'radial', // 径向渐变
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [
                  {
                    offset: 0, color: 'red'
                  },
                  {
                    offset: 1, color: 'blue'
                  }
                ]
              }
            }
					},
				],
			}
			mCharts.setOption(option)
		</script>
	</body>
</html>
